<!DOCTYPE html>
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<meta name="keywords" content="altdev,webgl,insanitydesign" />
		<meta name="author" content="INsanityDesign" />
		
		<title>WebGL - Part 2: In the beginning there was...</title> 
		
		<style type="text/css">
			#canvas {
				width: 640px;
				height: 480px;
			}
		</style>
		
		<script type="text/javascript" src="webgl-utils.js"></script>

		<script type="text/javascript">
			//Some global variables
			var gl;
			var width;
			var height;
			var canvas;
			
			//Our triangle
			var vertsTriangle = new Float32Array([
												0.0, 0.7, 0.0,	//Top
												-0.7, -0.7, 0.0,//Bottom Left
												0.7, -0.7, 0.0 	//Bottom Right
			]);
			var vertsTriangleBuffer;
			
			//Fragment Shader
			var shaderFS = "precision highp float;\n\
							void main() {\n\
								gl_FragColor = vec4(1.0, 1.0, 0.2, 1.0);\n\
							}\n";
			
			//Vertex Shader					
			var shaderVS = "attribute vec4 position;\n\
							void main() {\n\
								gl_Position = position;\n\
							}\n";
							
			//The shader program
			var shaderProgram;
		  
			/**
			 * The main entry point
			 */
			function main() {
				//
				canvas = document.getElementById("canvas");
				gl = WebGLUtils.setupWebGL(canvas);
				//Couldn't setup GL
				if(!gl) {
					alert("No WebGL!");
					return;
				}
				
				//
				width = canvas.width;
				height = canvas.height;
				
				//
				if(!init()) {
					alert("Could not init!");
					return;
				}
				
				//
				draw();
			}

			/**
			 * Init our shaders, buffers and any additional setup
			 */
			function init() {
				//
				if(!initShaders()) {
					alert("Could not init shaders!");
					return false;
				}
				
				//
				if(!initBuffers()) {
					alert("Could not init buffers!");
					return false;
				}
			
				//
				gl.clearColor(0.0, 0.0, 0.0, 1.0);
				gl.viewport(0, 0, width, height);
				gl.clearDepth(1.0);
				
				//
				return true;
			}
			
			/**
			 * Init our shaders, load them, create the program and attach them
			 */
			function initShaders() {
				//
				var fragmentShader = createShader(gl.FRAGMENT_SHADER, shaderFS);
				var vertexShader = createShader(gl.VERTEX_SHADER, shaderVS);
								
				//
				shaderProgram = gl.createProgram();
				if(shaderProgram == null) {
					alert("No Shader Program!");
					return;
				}
				
				//
				gl.attachShader(shaderProgram, vertexShader);
				gl.attachShader(shaderProgram, fragmentShader);
				gl.linkProgram(shaderProgram);				 
			 
				//
				if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
					alert("Could not link shader!");
					gl.deleteProgram(shaderProgram);
					return false;
				}
			 
				//
				gl.useProgram(shaderProgram);
			 
				//
				shaderProgram.position = gl.getAttribLocation(shaderProgram, "position");
				gl.enableVertexAttribArray(shaderProgram.position);
				
				return true;
			}
			
			/**
			 *
			 */
			function createShader(shaderType, shaderSource) {
				//Create a shader
				var shader = gl.createShader(shaderType);
				//
				if(shader == null) {
					return null;
				}
				
				//
				gl.shaderSource(shader, shaderSource);
				gl.compileShader(shader);
				
				//
				if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
					alert("Could not compile shader!");
					gl.deleteShader(shader);
					return null;
				}
				
				//
				return shader;
			}
			
			/**
			 * Init our required buffers (in our case for our triangle)
			 */
			function initBuffers() {
				//
				vertsTriangleBuffer = gl.createBuffer();
				gl.bindBuffer(gl.ARRAY_BUFFER, vertsTriangleBuffer);
				gl.bufferData(gl.ARRAY_BUFFER, vertsTriangle, gl.STATIC_DRAW);
				
				//
				return true;
			}
			
			/**
			 * Our draw/render main loop method
			 */
			function draw() {	
				//Request draw() to be called for the next frame if the page has a focus
				window.requestAnimFrame(draw, canvas);
				
				//
				gl.clear(gl.COLOR_BUFFER_BIT | gl.GL_DEPTH_BUFFER_BIT);
			 
				//
				gl.bindBuffer(gl.ARRAY_BUFFER, vertsTriangleBuffer);
				gl.vertexAttribPointer(shaderProgram.position, 3, gl.FLOAT, false, 0, 0);
			 
				//
				gl.drawArrays(gl.TRIANGLES, 0, 3);
			}			
		</script>
	</head> 
 
	<body onload="main();"> 
		<canvas id="canvas">
		</canvas> 
	</body> 
</html> 